<!--
	左面菜单
-->
<template>
<div class="menu-box">
	<el-menu
		:default-active="thisRouter"
		class="el-menu-vertical-demo"
		:router="true"
		@open=""
		@close=""
	>
	<!-- 循环菜单 -->
	<template #default>
		<div v-for="(menu,index) in menus">
			<!-- 先判断有没得子菜单  -->
			<!-- 有子菜单 start -->
			<el-sub-menu v-if="menu.children&&menu.children.length>0"  :index="menu.path">
				<template #title>
					<!-- 以后动态使用icon都这种写,新版本ElementPlus不支持icon在main中注册的 -->
					<component class="el-icon" :is="menu.icon"></component>
					<span>{{ menu.title }}</span>
				</template>
				<!-- 循环显示子菜单 -->
<!-- 这里只能加载两层，推荐使用递归加载 ，是需要优化的 https://www.cnblogs.com/qq128/p/13479575.html -->
				<template #default>
					<el-menu-item v-for="(childrenMenu,childrenIndex) in menu.children"
								  :index="childrenMenu.path">{{childrenMenu.title}}</el-menu-item>
				</template>
			</el-sub-menu>
			<!-- 有子菜单 end -->
			<!-- 没得子菜单 -->
			<el-menu-item v-else :index="menu.path">
				<!-- 以后动态使用icon都这种写,新版本ElementPlus不支持icon在main中注册的 -->
				<component class="el-icon" :is="menu.icon"></component>
				<span>{{menu.title}}</span>
			</el-menu-item>

		</div>
	</template>
	</el-menu>
</div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import ipconfig from "@/utils/ipconfig";
import axios from "@/plugins/axios";

export default {
	name: "Menu",
	// 参数
	props:["menus"],
	data(){
		return {
			isCollapse:false,
			/**
			 * 当前选择的
			 */
			thisRouter:""
		}
	},
	//
	methods:{
		selectMenu(item){

		}
	},
	beforeMount() {
		// console.log(this.menus)
		// 这里是解决菜单默认选中项的问题，直接访问网址会有这个问题，在这解决
		this.thisRouter=this.$route.path;
	},
	watch:{

	}
}
</script>

<style lang="scss" scoped>
.menu-box{
	height: calc(100vh - 60px);
	background-color: var(--menuBg);
}
/* 修改element ui的默认样式 */
.el-menu{
	border-right:none !important;
}
.el-menu-item:hover,.el-submenu__title:hover{
	background: var(--menuHoverBg) !important;
}
.el-header{
	padding: 0 !important;
}
</style>